<template>
  <div class="w-full h-full" ref="tablecontainer">
    <div v-if="props.showctl" class="w-full h-10 flex justify-between items-center">
      <div></div>
      <div>
        <n-popover trigger="click" placement="bottom">
          <template #trigger>
            <n-icon size="25" class="mx-1">
              <SettingOutlined></SettingOutlined>
            </n-icon>
          </template>
          <div class="w-200px flex flex-col">
            <div class="w-full flex justify-between items-center">
              <div>
                <n-switch v-model:value="allshow" @update:value="changeshow"/>
                列显示
              </div>
              <n-button  text  class="text-blue-500 dianji" @click="chongzhi">重置</n-button>
            </div>
            <n-watermark
                class="w-full h-full"
                content="核心机密 123"
                cross
                selectable
                :font-size="16"
                :line-height="16"
                :width="192"
                :height="128"
                :x-offset="12"
                :y-offset="28"
                :rotate="-15"
            >
              <n-data-table
                  :columns="thiscolnums"
                  :data="props.column"
                  :bordered="false"
                  :size="tablesize"
              />
            </n-watermark>
          </div>
        </n-popover>
        <n-dropdown trigger="hover" @select="handleSelect" :options="sizeoptions">
          <n-icon size="25" class="mx-1">
            <TextFontSize24Filled></TextFontSize24Filled>
          </n-icon>
        </n-dropdown>
      </div>
    </div>
    <n-data-table
        :columns="newcolumn"
        :data="props.tabledata"
        :bordered="false"
        :size="tablesize"
        :max-height="tableHeight"
        :row-class-name="rowClassName"
    />
  </div>
</template>

<script setup name="flextable">
import {h} from "vue"
import {useRoute, useRouter} from "vue-router";
import {
  SearchOutlined,
  UnlockOutlined,
  LockOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  SettingOutlined,
  CheckOutlined,
} from "@vicons/antd"
import {TextFontSize24Filled} from "@vicons/fluent"
import {NSwitch, NIcon} from "naive-ui"

const router = useRouter()
const route = useRoute()
const tablecontainer = ref(null)
const props = defineProps({
  column: {
    default(data) {
      if (Array.isArray(data)) {
        return data
      } else {
        return [data]
      }
    },
  },
  tabledata: {
    default(data) {
      if (data) {
        return data
      } else {
        return {}
      }
    }
  },
  // 是否显示顶部的控制
  showctl:{
    type: Boolean,
    default: true,
  },
})
const tablesize = ref("small")
const tubiao = h(NIcon, {size: 20, color: "blue"}, {
  default() {
    return [h(CheckOutlined, null, null)]
  }
})
// 测试控制行高
const rowClassName = ref("")
const tableHeight = ref(150)   // 图标的高度
const sizeoptions = ref([
  {
    label: "紧凑", key: "small", icon: () => {
      return tablesize.value === "small" ? tubiao : null
    }
  },
  {
    label: "默认", key: "medium", icon: () => {
      return tablesize.value === "medium" ? tubiao : null
    }
  },
  {
    label: "宽松", key: "large", icon: () => {
      return tablesize.value === "large" ? tubiao : null
    }
  },
])
// 过滤后的字段属性
const newcolumn = computed(() => {
  return props.column.filter(item => item.show)
})
// 选择某个字段
const handleSelect = (key) => {
  tablesize.value = key
}
// 顶部状态
const allshow = ref(true)
// 顶部开关
const changeshow = (jieguo) => {
  props.column.forEach(item => {
    item.show = jieguo
  })
}
// 开关修改的回调
const changeValue = (val, item) => {
  item.show = val
}
// 控制表的列名
const thiscolnums = ref([
  {
    title: "", render: (rowData, rowIndex) => {
      return h(NSwitch, {
        value: rowData.show, "onUpdate:value": (val) => {
          changeValue(val, rowData)
        }
      }, {
        default() {
          return ""
        }
      })
    }
  },
  {title: "", key: "title"}
])
// 点击重置
const chongzhi = () => {
  allshow.value = true
  changeshow(allshow.value)
}

// 计算表格的高度
const calculation = () => {
  console.log("触发计算一次,外层的高度", tablecontainer.value.offsetHeight)
  if (tablecontainer.value) {
    // 外壳的高度，减去自己的顶部div和外层底部的分页高度
    tableHeight.value = tablecontainer.value.offsetHeight - 40 - 46
  } else {
    tableHeight.value = 150
  }
  console.log(tableHeight.value, "现在的高度")
}

// 监听区域
watch(() => props.tabledata, () => {
  calculation()
})
// 生命周期区域
onMounted(() => {
  calculation()
  window.addEventListener('resize', () => {
    calculation()
  })
})
onUnmounted(() => {
  window.removeEventListener("resize", () => {
    calculation()
  })
})
</script>

<style scoped>

</style>
